<template>
	<el-dialog v-model="dialogVisible" :title="$t('header.personalData')" width="500px" draggable>
		<div class="info-dialog">
			<div class="info-dialog-item">
				<span>用户名：</span>
				<span class="info-dialog-item-value">{{ userInfo.username }}</span>
			</div>
			<div class="info-dialog-item">
				<span>手机号：</span>
				<span class="info-dialog-item-value">{{ userInfo.mobile }}</span>
			</div>
			<div class="info-dialog-item">
				<span>邮箱：</span>
				<span class="info-dialog-item-value">{{ userInfo.email }}</span>
			</div>
		</div>
	</el-dialog>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { GlobalStore } from '@/stores';
const dialogVisible = ref(false);
const globalStore = GlobalStore();
const userInfo = computed(() => globalStore.userInfo);
// openDialog
const openDialog = () => {
	dialogVisible.value = true;
};

defineExpose({ openDialog });
</script>

<style scoped lang="scss">
.info-dialog {
	padding: 10px;
	.info-dialog-item {
		margin-bottom: 10px;
		.info-dialog-item-value {
			color: #000000;
		}
	}
}
</style>
